import { Component, OnInit } from '@angular/core';
import {
  trigger,
  state,
  style,
  query,
  animate,
  group,
  stagger,
  keyframes,
  transition,
  animation,
  useAnimation,
} from '@angular/animations';

import { transAnimation  } from '../animation/reuse.animation';

@Component({
  selector: 'app-reuse',
  templateUrl: './reuse.component.html',
  styleUrls: ['./reuse.component.scss'],
  animations: [
    trigger('openClose',[
      transition('* => closed',[
          useAnimation(transAnimation,{
              params: {
                  height: '300px',
                  opacity: 1,
                  backgroundColor: 'red',
                  time: '.6s'
              }
          })
      ]),
      transition('* => open',[
          useAnimation(transAnimation,{
              params: {
                  height: '10px',
                  opacity: 1,
                  backgroundColor: 'green',
                  time: '.6s'
              }
          })
      ]),
  ])
  ]
})
export class ReuseComponent implements OnInit {

  isOpen: boolean = false;

  constructor() { }

  ngOnInit() {
  }

}
